<template>
  <div class="step_01">
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph } from "@antv/x6";
export default {
  data() {
    return {
      data: {
        nodes: [
          {
            id: "node1",
            x: 10,
            y: 10,
            width: 100,
            height: 50,
            label: "hello",
            attrs: {
              rect: {
                fill: "red"
              }
            },
          },
          {
            id: "node2",
            x: 100,
            y: 150,
            width: 100,
            height: 50,
            label: "world",
            attrs: {
              // 选择器的优先级 大于 标签
              body: {
                fill: "pink"
              },
              rect: {
                fill: "red"
              },
            },
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
          },
        ],
      },
    };
  },
  mounted() {
    const graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    graph.fromJSON(this.data);
  },
};
</script>
<style scoped lang='scss'>
</style>